<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		#outer {
			width: 500px;
			margin: 50px auto;
			padding: 10px;
			background-color: greenyellow;
			/*设置文本居中*/
			text-align: center;
		}
	</style>

	<script type="text/javascript">

		window.onload = function () {

			/*
			 * 点击按钮切换图片
			 */

			//获取两个按钮
			var prev = document.getElementById("prev");
			var next = document.getElementById("next");

			/*
			 * 要切换图片就是要修改img标签的src属性
			 */

			//获取img标签
			var img = document.getElementsByTagName("img")[0];

			//创建一个数组，用来保存图片的路径
			var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];

			//创建一个变量，来保存当前正在显示的图片的索引
			var index = 0;

			//获取id为info的p元素
			var info = document.getElementById("info");
			//设置提示文字
			info.innerHTML = "一共 " + imgArr.length + " 张图片，当前第 " + (index + 1) + " 张";


			//分别为两个按钮绑定单击响应函数
			prev.onclick = function () {

				/*
				 * 切换到上一张，索引自减
				 */
				index--;

				//判断index是否小于0
				if (index < 0) {
					index = imgArr.length - 1;
				}

				img.src = imgArr[index];

				//当点击按钮以后，重新设置信息
				info.innerHTML = "一共 " + imgArr.length + " 张图片，当前第 " + (index + 1) + " 张";
			};

			next.onclick = function () {

				/*
				 * 切换到下一张是index自增
				 */
				index++;

				if (index > imgArr.length - 1) {
					index = 0;
				}

				//切换图片就是修改img的src属性
				//要修改一个元素的属性 元素.属性 = 属性值
				img.src = imgArr[index];

				//当点击按钮以后，重新设置信息
				info.innerHTML = "一共 " + imgArr.length + " 张图片，当前第 " + (index + 1) + " 张";

			};


		};


	</script>
</head>

<body>
	<div id="outer">

		<p id="info"></p>

		<img src="img/1.jpg" alt="冰棍" />

		<button id="prev">上一张</button>
		<button id="next">下一张</button>

	</div>
</body>

</html>